<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/loading.min.css" />
<link href="fonts/iconfont.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="app">

	<div class="searchHeader">
		<a href="javascript:window.hostory.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav"></a>

		<input v-model="keyword" type="text" placeholder="搜索：玉米、大豆、小麦..." /> 

		<a href="javascript:void(0)" v-on:tap="search" class="mui-icon mui-icon-search"></a>
	</div>
	
	<div class="result" v-show="searchShow">
		<div class="dy">
        	<div class="hd">
        		<span class="mui-icon mui-icon-plusempty"></span>
        		历史搜索
        		<span class="mui-pull-right" style="font-weight: normal;" v-on:tap="clear">清空</span>
        	</div>
        	<div class="bd" id="sortable">
        		<li v-for="vo in history">
        		 	<div class="item" v-on:tap="qsearch(vo)">{{vo}}</div>
        		</li>
        	</div>
        </div>
        
        <div class="dy">
        	<div class="hd">
        		<span class="mui-icon mui-icon-plusempty"></span>
        		热门搜索
        	</div>
        	<div class="bd" id="channel">
        		<li v-for="vo in hot">
        			<div class="item" v-on:tap="qsearch(vo)">{{vo}}</div>
        		</li>
        	</div>
        </div>
	</div>	

	<div class="result" v-show="resultShow">
		<ul class="mui-table-view">
	        <li class="mui-table-view-cell mui-media my-media" v-for="vo in list">
	        	<a :href="vo.url" style="margin: 0; white-space: normal;">
                <img class="mui-media-object mui-pull-left" :src="vo.imgurl">
                <div class="mui-media-body">
                	{{vo.title}}
                	<div style="padding: 5px 0">
                    <p class="mui-pull-left">
                    	<i class="icon icon-shijian"></i>
                    	<span v-text="vo.time"></span>
                    </p>
                    <p class="mui-pull-right">
                    	<i class="icon icon-yanjing"></i>
                    	<span v-text="vo.num"></span>
                    </p>
                    </div>
                </div>	
                </a>			            
	        </li>
	    </ul>
	</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" charset="utf-8">	
app.init();
var vm = new Vue({
	el:"#app",
	data:{
		guanzhu:[],
		hot:['玉米','豆粕','鱼粉','DDGS','价格','利润','进口','政策'],
		history:[],
		keyword:'',
		list:[],
		searchShow:true,
		resultShow:false
	},
	created : function(){
		that = this;
		historyText = app.getKeyword();
		if (historyText!='' && historyText!=undefined) {
			that.history = historyText.split("|");
		};
	},
	methods:{
		qsearch : function(keyword){
			that = this;
			that.keyword = keyword;
			that.search();
		},
		search : function(){
			that = this;
			if (that.keyword!=''){
        		app.setKeyword(that.keyword);
			}
			request = {
				command:11,
				udid:uuid,
				keyword:that.keyword
			};	
			url = api+'?command=11';
			mui.ajax(url,{ 
                    data: that.keyword, 
                    dataType: 'json', 
                    type: 'post',                
                    success: function(res){
                    	that.list = res.body.items;
                    	that.searchShow = false;
                    	that.resultShow = true;
                    }
            });
		},
		clear:function(){
			that = this;
			localStorage.removeItem('$keyword');
			that.history = [];
		}
	},
	updated : function(){
	}
});
</script>
</body>
</html>